<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP '008_datagrid.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script type="text/javascript"
			src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
		<link rel="stylesheet" type="text/css"
			href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css"
			href="js/jquery-easyui-1.2.6/themes/icon.css" />
		<script type="text/javascript"
			src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="js/commons.js"></script>
		<script type="text/javascript">
			$(function(){

					/**
					 * 	对于form表单的验证 
					 */
					//数值验证组件 
					// 自定义的校验器
			$.extend($.fn.validatebox.defaults.rules, {   
    				midLength: {   
       			 			validator: function(value, param){   
            								return value.length >= param[0] && value.length <= param[1];    
        					},   
        					message: ''  
					} 
			}); 
			
			
			//数值验证组件 
			$('#period').numberbox({
				min:0 , 
				max:200,
				required:true , 
				missingMessage:'学时必填!' ,
				precision:0
			});
				
					
					var flag ;		//undefined 判断新增和修改方法 
					/**
					 *	初始化数据表格  
					 */
					$('#t_user').datagrid({
							idField:'id' ,		//只要创建数据表格 就必须要加 ifField
							title:'用户列表' ,
							//width:1300 ,
							fit:true ,
							height:450 ,
							url:'kcheck_listJson.action' ,
							fitColumns:true ,  
							striped: true ,					//隔行变色特性 
							loadMsg: '数据正在加载,请耐心的等待...' ,
							rownumbers:true ,
							rowStyler: function(index ,record){
							} ,
							frozenColumns:[[				//冻结列特性 ,不要与fitColumns 特性一起使用 
								{
									field:'ck' ,
									width:50 ,
									checkbox: true
								}
							]],
							columns:[[
								{
									field:'name' ,
									title:'知识点名' ,
									width:100 ,
									align:'center' ,
								},{
									field:'navigation' ,
									title:'所属分类' ,
									width:100 ,
									formatter:function(value , record , index){
										var str = '';
										$.ajax({
											type:'post' , 
											url : 'navigation_getNavigationName.action' ,
											cache:false ,
											//async: false ,		//同步请求
											data:{id:value},
											dataType:'json' ,
											success:function(result){
												str = result.name ;
											}
										});
										return str ;
									}
								},{
									field:'definition' ,
									title:'定义' ,
									width:100 ,
									hidden: true
								},{
									field:'defficulty' , 
									title:'难度' ,
									width:50 ,
									formatter:function(value , record , index){
											if(value == 1){
												return '非常简单' ;
											} else if( value == 2){
												return '简单' ; 
											} else if( value == 3){
												return '中等' ; 
											} else if( value == 4){
												return '困难' ; 
											} else if( value == 5){
												return '非常简单' ; 
											}
											//console.info(value);
											//console.info(record);
											//console.info(index); 
									}
								},{
									field:'goal' , 
									title:'目标' ,
									width:50 ,
									formatter:function(value , record , index){
											if(value == 1){
												return '了解' ;
											} else if( value == 2){
												return '掌握' ; 
											} else if( value == 3){
												return '应用' ; 
											} 
									}
								},{
									field:'period' ,
									title:'学时' ,
									width:100 ,
									sortable : true
								},{
									field:'description' ,
									title:'描述' ,
									width:150 , 
									formatter:function(value , record , index){
										return '<span title='+value+'>'+value+'</span>';
									}
								},{
									field:'status' , 
									title:'状态' , 
									width:150,
									formatter:function(value , record , index){
										if(value==1){
											return '显示中';
										}else{
											return '<span style:color=red;>正在审核</span>';
										}
									}
									
			
								}
							]] ,
							pagination: true , 
							pageSize: 10 ,
							pageList:[5,10,15,20,50] ,
							toolbar:[
								{
									text:'新增知识点' ,
									iconCls:'icon-add' , 
									handler:function(){
										flag = 'add';
										$('#mydialog').dialog({
												title:'新增知识点' 
										});
										//$('#myform').find('input[name!=sex]').val("");
										$('#myform').get(0).reset();
										//$('#myform').form('clear');
										$('#mydialog').dialog('open');
									
									}
									
								},{
									text:'修改知识点' ,
									iconCls:'icon-edit' , 
									handler:function(){
										flag = 'edit';
										var arr =$('#t_user').datagrid('getSelections');
										if(arr.length != 1){
											$.messager.show({
												title:'提示信息!',
												msg:'只能选择一行记录进行修改!'
											});
										} else {
											$('#mydialog').dialog({
												title:'修改用户'
											});
											$('#mydialog').dialog('open'); //打开窗口
											$('#myform').get(0).reset();   //清空表单数据 
											$('#myform').form('load',{	   //调用load方法把所选中的数据load到表单中,非常方便
												id:arr[0].id ,
												name:arr[0].name ,
												definition:arr[0].definition ,
												description:arr[0].description ,
												defficulty:arr[0].defficulty ,
												period:arr[0].period ,
												goal:arr[0].goal ,
												nav:arr[0].nav ,
												status:arr[0].status,
											});
										}
									
									}
								},{
									text:'删除用户' ,
									iconCls:'icon-remove' , 
									handler:function(){
											var arr =$('#t_user').datagrid('getSelections');
											if(arr.length <=0){
												$.messager.show({
													title:'提示信息!',
													msg:'至少选择一行记录进行删除!'
												});
											} else {
												
												$.messager.confirm('提示信息' , '确认删除?' , function(r){
														if(r){
																var ids = '';
																for(var i =0 ;i<arr.length;i++){
																	ids += arr[i].id + ',' ;
																}
																ids = ids.substring(0 , ids.length-1);
																$.post('kpoint_deleteByIds.action' , {ids:ids} , function(result){
																	//1 刷新数据表格 
																	$('#t_user').datagrid('reload');
																	//2 清空idField   
																	$('#t_user').datagrid('unselectAll');
																	//3 给提示信息 
																	$.messager.show({
																		title:'提示信息!' , 
																		msg:'操作成功!'
																	});
																});
														} else {
															return ;
														}
												});
											}
									}								
								},{
									text:'查询知识点' , 
									iconCls:'icon-search' , 
									handler:function(){
											$('#lay').layout('expand' , 'north');
											$('#mysearch').get(0).reset();
									}
								}	
							]
					});
					
					
					/**
					 *  提交表单方法
					 */
					$('#btn1').click(function(){
							if($('#myform').form('validate')){
								$.ajax({
									type: 'post' ,
									url: flag=='add'?'kpoint_add.action':'kpoint_edit.action' ,
									cache:false ,
									data:$('#myform').serialize() ,
									dataType:'json' ,
									success:function(result){
										//1 关闭窗口
										$('#mydialog').dialog('close');
										//2刷新datagrid 
										$('#t_user').datagrid('reload');
										//3 提示信息
										$.messager.show({
											title:result.status , 
											msg:result.message
										});
									} ,
									error:function(result){
										$.meesager.show({
											title:result.status , 
											msg:result.message
										});
									}
								});
							} else {
								$.messager.show({
									title:'提示信息!' ,
									msg:'数据验证不通过,不能保存!'
								});
							}
					});
					
					/**
					 * 关闭窗口方法
					 */
					$('#btn2').click(function(){
						$('#mydialog').dialog('close');
					});
					
						
					$('#searchbtn').click(function(){
						$('#t_user').datagrid('load' ,serializeForm($('#mysearch')));
					});
					
					
					$('#clearbtn').click(function(){
						$('#mysearch').get(0).reset();
						$('#t_user').datagrid('load' ,{});
					});
					

			});
			
			
			
		
			//js方法：序列化表单 			
			function serializeForm(form){
				var obj = {};
				$.each(form.serializeArray(),function(index){
					if(obj[this['name']]){
						obj[this['name']] = obj[this['name']] + ','+this['value'];
					} else {
						obj[this['name']] =this['value'];
					}
				});
				return obj;
			}

	</script>
	</head>

	<body>
	<!-- 查询window -->
	<div id="lay" class="easyui-layout" style="width: 100%; height: 100%">
			<div region="north" title="知识点查询" collapsed=true style="height: 60px;">
				<form id="mysearch" method="post">
					<table>
						<tr>
							<td>
								知识点名：
							</td>
							<td>
								<input type="text" name="name"
								class="easyui-validatebox"
								validType="midLength[1,100]" missingMessage="知识点名必填!"
								invalidMessage="必须在100个字符以内!" style="width: 100px;"/>
							</td>
							<td>&nbsp;&nbsp;&nbsp;
								难度：
							</td>
							<td>
								<select name="defficulty" style="width: 100px;"
								name="difficulty">
								<option value="" selected="selected">
								</option>
								<option value="1">
									非常简单
								</option>
								<option value="2">
									简单
								</option>
								<option value="3">
									中等
								</option>
								<option value="4">
									困难
								</option>
								<option value="5">
									非常困难
								</option>
							</select>
							</td>
							<td>&nbsp;&nbsp;&nbsp;
								最小学时：
							</td>
							<td>
								<input type="text" name="minPeriod"
								class="easyui-numberbox"
								min="0" max="200" value="" style="width: 100px;"/>
							</td>
							<td>&nbsp;&nbsp;&nbsp;
								最大学时：
							</td>
							<td>
								<input type="text" name="maxPeriod"
								class="easyui-numberbox"
								min="0" max="200" value="" style="width: 100px;"/>
							</td>
							<td>&nbsp;&nbsp;&nbsp;
								<a id="searchbtn" class="easyui-linkbutton">查询</a>
								<a id="clearbtn" class="easyui-linkbutton">清空</a>
							</td>
						</tr>
					</table>

				</form>

			</div>
			<div region="center">
				<table id="t_user"></table>
			</div>
		</div>

		<div id="mydialog" title="添加知识点" modal=true draggable=false
			class="easyui-dialog" closed=true style="width: 400px;">
			<form id="myform" action="" method="post">
				<input type="hidden" name="id" value="" />
				<table>
					<tr>
						<td>
							知识点名:
						</td>
						<td>
							<input type="text" name="name" id="name"
								class="easyui-validatebox" required=true
								validType="midLength[1,100]" missingMessage="知识点名必填!"
								invalidMessage="必须在100个字符以内!" />
						</td>
					</tr>

					<tr>
						<td>
							所属分类:
						</td>
						<td>
							<input type="text" name="" id="nav" missingMessage="分类必选!" />
						</td>
					</tr>
					<tr>
						<td>
							定义:
						</td>
						<td>
							<textarea type="text" name="definition" id="definition"
								class="easyui-validatebox" required=true
								validType="midLength[1,300]" missingMessage="定义必填!"
								invalidMessage="定义必须在300个字符以内!"></textarea>
						</td>
					</tr>
					<tr>
						<td>
							难度:
						</td>
						<td>
							<select id="cc" name="defficulty" style="width: 200px;"
								name="difficulty">

								<option value="1">
									非常简单
								</option>

								<option value="2">
									简单
								</option>

								<option value="3">
									中等
								</option>

								<option value="4">
									困难
								</option>

								<option value="5">
									非常困难
								</option>
							</select>
						</td>
					</tr>

					<tr>
						<td>
							目标:
						</td>
						<td>
							了解
							<input type="radio" name="goal" checked="checked" value="1" />
							掌握
							<input type="radio" name="goal" value="2" />
							应用
							<input type="radio" name="goal" value="3" />
						</td>
					</tr>

					<tr>
						<td>
							学时:
						</td>
						<td>
							<input id="period" type="text" name="period"
								class="easyui-validatebox" required=true " />
						</td>
					</tr>


					<tr>
						<td>
							添加父类知识点:
						</td>
						<td>
							<input id="" type="text" name="" />
						</td>
					</tr>


					<tr>
						<td>
							添加前导知识点:
						</td>
						<td>
							<input id="" type="text" name="" />
						</td>
					</tr>

					<tr>
						<td>
							描述:
						</td>
						<td>
							<textarea name="description" id="description"
								class="easyui-validatebox" required=true
								validType="midLength[1,5000]" missingMessage="描述必填!"
								invalidMessage="描述必须在5000个字符以内!"></textarea>
						</td>
					</tr>
					<tr align="center">
						<td colspan="2">
							<a id="btn1" class="easyui-linkbutton">确定</a>
							<a id="btn2" class="easyui-linkbutton">关闭</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>
